<template>
	<view class="page">
		<view class="title">输入4位验证码</view>
		<view class="tip"></view>
		<view class="tail"></view>
		<view @click="show = true"><u-code-input  v-model="value" mode="line" :maxlength="4" hairline @click="show = true"></u-code-input></view>
		<u-keyboard :tooltip="false" :overlay="false" :safeAreaInsetBottom="true" ref="uKeyboard" mode="number" :show="show" @change="changeCode" @close="closeCode()" @backspace="backspace()"></u-keyboard>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			show: true
		};
	},
	methods: {
		backspace() {
			var arr = this.value.split('');
			arr.pop();
			this.value = arr.join('');
		},
		async changeCode(v) {
			this.value = this.value + v;
			if (this.value.length == 4) {
				this.show = false;
				//ajax
				 
				this.toPage('/pages/home/wellcome')
			}
		},
		closeCode() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 100px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	.title {
	}
	.tip {
	}
	.tail {
	}
}
</style>
